<template>
  <div>
    <!-- 查询条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.staffName" placeholder="请输入姓名" clearable />
      </el-form-item>

      <el-form-item label="部门">
        <el-select v-model="formInline.departmentId" placeholder="请选择" clearable>
          <el-option v-for="item in departmentInfo" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="员工状态">
        <el-select v-model="formInline.staffStateId" placeholder="请选择" clearable>
          <el-option v-for="item in staffState" :key="item.staffStateId" :label="item.staffStateName"
            :value="item.staffStateId" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="selStaff()">查询</el-button>
        <el-button type="primary" @click="addStaff()">增加</el-button>
        <el-button type="primary" @click="toLead()">导入</el-button>
      </el-form-item>
    </el-form>

    <!-- 显示列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="employeeID" label="员工编号" align="center" width="150" />

      <el-table-column prop="staffName" label="姓名" align="center" />

      <el-table-column prop="idNumber" label="身份证号" align="center" width="200" />

      <el-table-column prop="phone" label="联系电话" align="center" width="150" />

      <el-table-column prop="staffStateName" label="员工状态" align="center" />

      <el-table-column prop="departmentName" label="部门" align="center" width="150" />

      <el-table-column label="入职日期" align="center" width="150">
        <template #default="scope">
          {{ scope.row.entryDate.substr(0, 10) }}
        </template>
      </el-table-column>

      <el-table-column prop="postName" label="职务" align="center" />

      <el-table-column prop="stationName" label="岗位" align="center" width="150" />

      <el-table-column prop="accountNumber" label="账号" align="center" width="150" />

      <el-table-column prop="roleName" label="角色" align="center" width="150" />

      <el-table-column prop="location" label="详细地址" align="center" width="350">
        <template #default="scope">
          {{ scope.row.area + scope.row.location }}
        </template>
      </el-table-column>

      <el-table-column prop="createBy" label="创建人" align="center" />

      <el-table-column label="创建时间" width="200" align="center">
        <template #default="scope">
          <span v-if="scope.row.createDate != null">{{
      scope.row.createDate.replace("T", " ").substr(0, 19)
    }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="updateBy" label="修改人" align="center" />

      <el-table-column label="修改时间" width="200" align="center">
        <template #default="scope">
          <span v-if="scope.row.updateDate != null">{{
      scope.row.updateDate.replace("T", " ").substr(0, 19)
    }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template #default="scope">
          <el-button link type="primary" @click="upd(scope.row.employeeID)">
            编辑
          </el-button>
          <el-button link type="primary" @click="examine(scope.row.employeeID)">
            查看
          </el-button>
          <el-button link type="primary" @click="delStaff(scope.row.employeeID)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[15, 20, 35, 40]"
      layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
<script lang="ts" setup>
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

//部门信息
const departmentInfo = ref();

//员工状态
const staffState = ref();

//查询条件
const formInline = reactive({
  staffName: "",
  departmentId: null,
  staffStateId: null,
});

//员工信息
const tableData = ref();

//分页
const currentPage = ref(1);
const pageSize = ref(15);
const totalCount = ref();

//获取部门
const getDepartment = () => {
  axios.get("Readroute/api/Department/GetDepartmentInfo").then((res) => {
    //console.log(res.data);
    departmentInfo.value = res.data;
  });
};

//获取员工状态
const getStaffState = () => {
  axios.get("Readroute/api/StaffState/GetStaffStates").then((res) => {
    if (res.data) {
      //console.log(res.data);
      staffState.value = res.data;
    }
  });
};

//导入
const toLead = () => { };

//获取员工信息
const getStaff = () => {
  axios
    .get("Readroute/api/StaffInfo/GetAllStaff", {
      params: {
        staffName: formInline.staffName,
        departmentId: formInline.departmentId,
        staffStateId: formInline.staffStateId || 0,
        pageIndex: currentPage.value,
        pageSize: pageSize.value,
      },
    })
    .then((res) => {
      //console.log(res.data);
      tableData.value = res.data.datas;
      totalCount.value = res.data.totalCount;
    });
};

//页容量改变
const handleSizeChange = (val: number) => {
  //console.log(`${val} items per page`);
  pageSize.value = val;
  getStaff();
};
//页序号改变
const handleCurrentChange = (val: number) => {
  //console.log(`current page: ${val}`);
  currentPage.value = val;
  getStaff();
};

//查询
const selStaff = () => {
  currentPage.value = 1;
  getStaff();
};

//删除员工
const delStaff = (employeeID: string) => {
  ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      axios
        .delete("route/api/Staff/DelStaff?employeeID=" + employeeID)
        .then((res) => {
          if (res.data == 1) {
            ElMessage({
              message: "删除成功！",
              type: "success",
            });
            getStaff();
          }
        });
    })
    .catch(() => { });
};

//跳转到添加页面
const addStaff = () => {
  router.push("/src/views/Jurisdiction/StaffAdd.vue");
};

//跳转到详情页
const examine = (employeeID: string) => {
  router.push(
    "/src/views/Jurisdiction/StaffDetails.vue?employeeID=" + employeeID
  );
};

//跳转到修改页面
const upd = (employeeID: string) => {
  router.push(
    "/src/views/Jurisdiction/StaffUpdate.vue?employeeID=" + employeeID
  );
};

//加载
onMounted(() => {
  getStaffState();
  getDepartment();
  getStaff();
});
</script>
<style></style>